CSS3

CSS 官网、 CSS 参考手册、 兼容性查询

关系性选择器

div > p{}  // 直接子元素
div + p{}  // div 下一个满足条件的兄弟元素节点 p
div ~ p{}  // div 后面的所有满足条件的兄弟元素节点 p

属性选择器

div[data~="a"]{}  // 所有含有属性值 data="a" 的元素
div[data|="a"]{}  // 以属性名"a"开头的元素
a[href^='http']{}  // 以属性名"http"开头的元素
a[href$='com/']{}  // 以属性名"com/"结尾的元素
a[href*='baidu']{}  // 含有属性名"baidu"的元素

伪元素选择器

input::placehoder{  // input元素默认输入文字
    color:
}
p::selection{  // 文字被选中 (-moz-selection 火狐不兼容)
    color:
    background-color:
    text-shadow:
}

伪类选择器

div:not(.demo){}  // 属性名不为 .demo 的 div 元素
:root{}  // 根元素  指向 html，!= html
:target{}  // location.hach = xxx  锚点跳转

div:first-of-type{}  // 第一个同类型指定元素
div:last-of-type{}  // 最后一个同类型指定元素
div:only-of-type{}  // 单独一个类型指定元素

div:nth-of-type(n){  // 同类型第 n 个指定元素
    // odd / 2n+1  奇数行
    // even / 2n  偶数行
}
div:nth-of-last-type(n){}  // 同类型倒数第 n 个指定元素

// 需要考虑其他元素的影响(不常用)
    div:first-child{}  // 第一个div元素
    div:last-child{}  // 最后一个div元素
    div:only-child{}  // 单独一个指定元素

    div:nth-child(n){}  // 第n个指定元素
    div:nth-last-child(n){}  // 倒数第 n 个指定元素

div:empty{}  // 无子元素指定元素(只含注释) hasChildNodes();

input:checked{}  // 复选框 (用来做简单交互)
input:enabled{}  // 可用文本框
input:disabled{}  // 禁用文本框
input:read-only{}  // 只读
input:read-write{}  // 可读可写

input:valid{}  // 合法文本框
input:invalid{}  // 非法文本框
input:optional{}  // 可输入文本框
input:required{}  // 匹配设置了required属性的文本框
input:in-range{}  // 满足要求的文本框
input:out-of-range{}  // 不满足要求的文本框